<template>
  <div class="common-body">
    <!--  顶部面包屑  -->
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回
      </el-button>
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: '/orderManagement/entry/un-submitted' }"
          >订单管理
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="$route.query.type === 'sunyao'"
          :to="{
            path: '/orderManagement/approval/item-list'
          }"
          >订单审批</el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-else
          :to="{
            path: '/orderManagement/entry/un-submitted'
          }"
          >订单录入
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span>查看</span>
          <span class="ccui-curr-crumb ccui-ml-10" v-if="basicInfoObj">
            {{ basicInfoObj.orderName }}
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div :class="commonStyle" v-if="isTrue === true">
      <div
        class="detail-info"
        :style="{
          width: approvingBool == false ? '100%' : 'calc(100% - 398px)'
        }"
      >
        <div class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div class="detail-info-form-container self-container">
          <el-tabs v-model="activeName" class="el-tabs__customize">
            <el-tab-pane label="基本信息" name="a">
              <el-group-title class="d_jump">
                <template slot="groupTitle">
                  <el-form
                    :model="form"
                    ref="basicInfo"
                    label-width="160px"
                    class="ccui-form"
                  >
                    <el-col
                      v-for="(item, index) in basicInfo"
                      :span="item.colSpan || 12"
                      :key="index"
                    >
                      <el-form-item
                        :label="item.label + '：'"
                        class="remarkClass"
                        :title="basicInfoObj[item.value]"
                        >{{ basicInfoObj[item.value] }}
                      </el-form-item>
                    </el-col>
                  </el-form>
                </template>
              </el-group-title>
            </el-tab-pane>
            <el-tab-pane label="采购清单" name="b">
              <el-group-title class="ccui-group-wrapper d_jump">
                <template slot="groupTitle">
                  <div class="ccui-multifunctional-table-wrapper">
                    <el-table
                      :data="tableData"
                      border
                      max-height="525"
                      class="ccui-form-child-table"
                      ref="tableList"
                    >
                      <el-table-column
                        v-for="(item, i) in tableColumnList"
                        :label="item.label"
                        :fixed="item.fixed"
                        :type="item.type"
                        :prop="item.prop"
                        :header-align="item.headerAlign || 'left'"
                        :align="item.align"
                        :min-width="item.width"
                        :key="i"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-group-title>
            </el-tab-pane>
            <el-tab-pane label="附件" name="c">
              <attachment ref="attachment" :typeDetail="'detail'"></attachment>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--  右边审批状态  -->
      <approval-read-record
        v-if="approvingBool || type == 'sunyao'"
        :approvalRecordData="activities"
      ></approval-read-record>
      <!--  按钮  -->
      <!--  底部导航栏及签名导出  -->
      <bottomGuide
        v-if="basicInfoObj.bizStatus === '审批通过' && isTrue"
        busiType="101"
        approvalStatus="approvaled"
        exportMethod="get"
        methodGetPageType="exportOrder"
        :curPageId="$route.params.id"
        :businessCode="businessCode"
        @handleBack="handleBack"
      />
      <el-bottom-guide v-else>
        <ul class="ccui-bottom-button">
          <li>
            <el-button type="bottom" icon="icon-ccui-return" @click="handleBack"
              >返回
            </el-button>
          </li>
        </ul>
      </el-bottom-guide>
    </div>
  </div>
</template>

<script>
import attachment from "../../components/attachment.vue";
import { getOrder, enteringRevokeApproval } from "../api/orderEntry";
import { ishasAgentId } from "@/basa/utils";
import { formatNumber } from "@/basa/utils";
import publicComponent from "@/basa/components/public";

export default {
  name: "item-detail",
  components: {
    approvalReadRecord: publicComponent.approvalRecord,
    attachment,
    bottomGuide: publicComponent.bottomGuide
  },
  data() {
    return {
      businessCode: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      isTrue: false,
      activeName: "a",
      approving: "1", // 审批状态
      approvingStatus: true, // 审批状态展示
      approvingType: {
        0: "pending", //待审批
        1: "approving", // 审批中
        3: "approvaled", // 审批通过
        4: "sendback", // 已退回
        2: "withdrawn" // 已撤回
      },
      activities: [],
      focus: "basicInfo",
      form: {},
      basicInfoObj: {},
      basicInfo: [
        {
          label: "订单编号",
          value: "orderNo"
        },
        {
          label: "订单名称",
          value: "orderName"
        },
        {
          label: "填报单位",
          value: "reportInOrgName"
        },
        {
          label: "供应商名称",
          value: "partyBName"
        },
        {
          label: "合同名称",
          value: "contractName"
        },
        {
          label: "合同编号",
          value: "contractCode"
        },
        {
          label: "物资类别",
          value: "thirdCategoriesOfName"
        },
        {
          label: "供应商联系人",
          value: "contractPerson"
        },
        {
          label: "供应商联系人手机号",
          value: "contractPersonTel"
        },
        {
          label: "编制人",
          value: "compileUser"
        },
        {
          label: "订单发出时间",
          value: "orderDeliveryTime"
        },
        {
          label: "订单状态",
          value: "bizStatus"
        },
        {
          label: "备注说明",
          value: "remark",
          colSpan: 22,
          remarkClass: true,
          title: true
        }
        // {
        //   label: "关闭原因",
        //   value: "closeReason"
        // },
        // {
        //   label: "关闭时间",
        //   value: "closeTime"
        // },
        // {
        //   label: "说明",
        //   value: "closeDescription"
        // }
      ],
      tableData: [],
      tableColumnList: [
        {
          type: "index",
          label: "序号",
          fixed: "left",
          width: "50"
        },
        {
          label: "设备物资编码",
          prop: "materialsCode",
          width: "110",
          fixed: "left"
        },
        {
          label: "设备物资名称",
          prop: "materialsName",
          fixed: "left",
          width: "300"
        },
        {
          label: "设备物资说明",
          prop: "matDescribe",
          width: "200"
        },
        {
          label: "分类名称",
          prop: "thirdCategoriesOfName",
          width: "130"
        },
        {
          label: "计量单位",
          prop: "currentMeasuringUnit",
          width: "90"
        },
        {
          label: "数量",
          prop: "currentNum",
          width: "140"
        },
        {
          label: "交货时间",
          prop: "deliveryTime",
          width: "170"
        },
        {
          label: "交货地点",
          prop: "listAddress",
          width: "200"
        },

        {
          label: "生产厂家/品牌",
          prop: "manufacturer",
          width: "130"
        },
        {
          label: "收货人",
          prop: "consignee",
          width: "130"
        },
        {
          label: "收货人电话",
          prop: "consigneePhone",
          width: "130"
        },
        {
          label: "备注",
          prop: "remark",
          width: "100"
        }
      ],
      bizStatusType: {
        2: "待提交",
        3: "审批中",
        4: "已撤回",
        5: "审批通过",
        6: "审批退回"
      },
      commonStyle: "",
      approvingBool: true,
      type: this.$route.query.type
    };
  },
  methods: {
    handleWithdarw() {
      this.$confirm("确定要撤回吗?", "提示信息", {
        distinguishCancelAndClose: true,
        cancelButtonClass: "取消",
        confirmButtonText: "确定",
        customClass: "ccui-message-box-custom"
      })
        .then(() => {
          enteringRevokeApproval({ id: this.$route.params.id }).then(res => {
            this.callBackThenMessage(res);
          });
        })
        .catch(e => {});
    },
    // 删除 / 撤回成功提示message
    callBackThenMessage(res) {
      let { code, message } = res.data;
      if (code === "0") {
        this.$message.success(message);
      } else {
        this.$showErrorMessage(message);
      }
      // this.$message({
      //   message: message,
      //   type: code === "0" ? "success" : "error",
      //   duration: 2000,
      //   ccuiCustom: true
      // });
      this.handleBack();
    },
    // 数据获取
    getOrder() {
      let params = {
        id: this.$route.params.id,
        isShowWorkflow: true,
        isShowPageLoading: true,
        loadingMessage: "加载中,请稍等..."
      };
      getOrder(params).then(res => {
        this.businessCode = res.data.data.ocOrderBasic.orderNo;
        this.basicInfoObj = res.data.data.ocOrderBasic;
        this.basicInfoObj.bizStatus =
          this.bizStatusType[this.basicInfoObj.bizStatus];

        this.basicInfoObj.orderDeliveryTime = this.basicInfoObj
          .orderDeliveryTime
          ? this.basicInfoObj.orderDeliveryTime
          : "";
        let resultCommon =
          this.basicInfoObj.bizStatus === "待提交" ||
          this.basicInfoObj.bizStatus === "已撤回";
        this.commonStyle = resultCommon
          ? "detail-box ccui-clearfix commonStyle"
          : "detail-box ccui-clearfix";
        this.approvingBool = resultCommon ? false : true;
        this.tableData = res.data.data.ocOrderBills;
        this.tableData.forEach(item => {
          item.currentNum = formatNumber(item.currentNum, 3);
          if (item.deliveryTime) {
            item.deliveryTime = item.deliveryTime.substring(0, 10);
          }
          item.listAddress =
            item.deliveryAreaName +
            item.provinceName +
            item.cityName +
            item.countyName +
            item.deliveryPoints;
        });
        this.activities = res.data.data.approveRecords;
        this.activities.forEach(item => {
          if (item.operState === 0) {
            item.icon = "el-icon-time";
            item.color = "#F5A623";
          }
        });
        this.isTrue = true;
        this.$nextTick(() => {
          res.data.data.files.forEach(item => {
            item.fileSize = Math.round(item.fileSize / 1024) + "kb";
            // item.uploadTime = item.uploadTime.replace(/-/g, "/");
            this.$refs.attachment.$refs.uploadItem.uploadFiles.push(item);
            this.$refs.attachment.form.fileArr.push(item.fileInfoId);
          });
          this.$refs.attachment.tableData = res.data.data.files;
        });
        this.approving =
          this.approvingType[res.data.data.ocOrderBasic.approveStatus];
        this.approvingStatus = false;
        this.$nextTick(() => {
          this.approvingStatus = true;
        });
      });
    },
    handleBack() {
      this.$router.push(
        sessionStorage.getItem("fromPath") ||
          "/orderManagement/entry/un-submitted"
      );
    }
  },
  // mounted() {
  //   this.getOrder();
  // },
  activated() {
    this.getOrder();
  },
  beforeRouteEnter(to, from, next) {
    console.log("from.fullPath", from.fullPath);
    !(to.fullPath === from.fullPath) &&
      sessionStorage.setItem("fromPath", from.fullPath);
    next();
  },
  // 更改列表缓存状态
  beforeRouteLeave(to, from, next) {
    if (this.submitFlag === true) {
      for (var key in this.$vnode.parent.parent.componentInstance.cache) {
        delete this.$vnode.parent.parent.componentInstance.cache[
          ishasAgentId(to.path, key)
        ];
      }
    }
    console.log(111111);
    this.isTrue = false;
    this.activeName = "a";
    next();
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-table {
  /deep/ th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }

  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}

.remarkClass {
  /deep/ .el-form-item__content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word !important;
  }
}

.commonStyle {
  background: #ffffff;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
</style>
